@import './common.styl'
html,body{
    font-family  "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif
    margin  0
    height  100%
}
@font-face
    font-family "iconfont"
    src url("assets/fonts/iconfont.eot")
    src url("assets/fonts/iconfont.eot#iefix") format('embedded-opentype'),
    url("assets/fonts/iconfont.woff") format('woff'),
    url("assets/fonts/iconfont.ttf") format('truetype'),
    url("assets/fonts/iconfont.svg#iconfont") format('svg')
.iconfont
    font-family "iconfont" !important
    font-size 16px
    font-style normal
    -webkit-font-smoothing  antialiased
    -webkit-text-stroke-width 0.2px
    -moz-osx-font-smoothing  grayscale
#app
    height 100%

.top_menu
    height  (fontSize*6.2)
    line-height (fontSize*6.2)
    text-align  center
    position  relative
    display  flex
    background-repeat  repeat-x
    h1
        flex  0 0 (fontSize*20)
        color  #fff
        word-wrap break-word
        word-break break-all
        text-align center
        padding  0 10px
        font-size  (fontSize*2.6)
        font-weight  bold
    .header
        flex 1
        display  flex
        border-bottom  7px solid #2eb398
    .el-input
        -webkit-transform  translateY(-14px)
        -moz-transform  translateY(-0px)
        -ms-transform  translateY(-0px)
        -o-transform  translateY(-14px)
    .block
        flex 1
    .el-cascader__label
        color  #bfcbd9
    .el-cascader
        height  (fontSize*3.4)
        background  none
        margin-top  (fontSize*1.3)
        display none
        margin-left  (fontSize*4)
        float  left
    .el-menu--dark
        background  none
    .el-menu-item
        text-align  left
        height  (fontSize*6.2) !important
.el-menu-item.is-active ,.theme-default .el-menu-item.is-active
    color  #21be9f
.el-menu--horizontal
    >.el-menu-item
        &:hover
            border-bottom-color  #27977f
            border-bottom-width  7px !important
.header_right
    color  #bfcbd9
    font-size  14px
    flex 0 0 (fontSize*58)
    span
        cursor  pointer
        padding  0 (fontSize/2)
        display  block
        float  left
    .header_nev_right
        line-height 62px
        text-align  center
        width  120px
        transition all .3s ease
        &:hover
            font-size  15px
            color  #fff
            transition all .3s ease
.content
    display  flex
    /*height  94%*/
.left
    flex  0 0 (fontSize*22)
    min-height  (fontSize*92)
    background-repeat  repeat
.bk-avatar
    cursor pointer
    .img-circle
        width (fontSize*6)
        height  (fontSize*6)
        border-radius  50%
        display  block
        margin   fontSize auto
    p
        text-align  center
        color  #bfcbd9
.divider2
    background-image  -webkit-linear-gradient(left, transparent, #777, transparent)
    background-image  -moz-linear-gradient(left, transparent, #777, transparent)
    background-image  -ms-linear-gradient(left, transparent, #777, transparent)
    background-image  -o-linear-gradient(left, transparent, #777, transparent)
    height  1px
    margin  9px 0
    overflow  hidden
.theme-default .el-submenu__title hover ,.theme-blue .el-submenu__title hover
    background-color  rgb(72, 87, 106)
.chart-icon
    content  ''
    display  inline-block
    width  (fontSize*2)
    height  (fontSize*2)
    background-image  url("assets/img/chart-icon.png")
    background-size  20px
    background-repeat  no-repeat
    -webkit-border-radius  50%
    border-radius  50%
    border  1px solid #999
    margin-right  10px
.el-submenu__title
    display  flex
    align-items center
    justify-content cneter
.el-submenu
    &:nth-of-type(2)
        .chart-icon
            background-position-y  -60px
    &:nth-of-type(3)
        .chart-icon
            background-position-y  -80px

    &:nth-of-type(4)
        .chart-icon
            background-position-y  -100px
    &:nth-of-type(5)
        .chart-icon
            background-position-y  -120px
    &:nth-of-type(6)
        .chart-icon
            background-position-y  -140px
    &:nth-of-type(7)
        .chart-icon
            background-position-y  -160px
    &:nth-of-type(8)
        .chart-icon
            background-position-y  -80px
    &:nth-of-type(9)
        .chart-icon
            background-position-y  -100px
    &:nth-of-type(10)
         .chart-icon
            background-position-y  -120px
    &:nth-of-type(11)
         .chart-icon
            background-position-y  -140px
    &:nth-of-type(12)
         .chart-icon
            background-position-y  -160px
.right
    position  relative
    /*height  910px*/
    flex 1
    padding-bottom  (fontSize*2)
    overflow  hidden
.el-form-item.is-error .el-input-group__append .el-input__inner, .el-form-item.is-error .el-input-group__prepend .el-input__inner, .el-form-item.is-error .el-input__inner
    border-color red
.backtop
    background url("assets/img/backTop.png") no-repeat
    cursor default
    display block
    width 55px
    height 250px
    margin -125px 0 0
    position fixed
    right 20px
    top 80%
    z-index 1010
    background-position -45px 0
    &:hover
      background-position -45px 0
      .level-2
        opacity 1
        transition opacity  .5s
    .level-2
      width 55px
      background url("assets/img/backTop.png") -344px 0 no-repeat
      display block
      height 250px
      opacity 0
      position absolute
      top 0
      left 0
      z-index 1
      transition all .5s
.right_header
    background: #324157
    width: 100%
    height: 50px
    display: flex
    .listName
        font-size: 22px
        font-weight: 400
        color: #bfcbd9
        line-height: 50px
        flex: 0 0 170px
        padding-left: 40px
        i
            font-size: 24px
            padding-right: 10px
.right_content
    width: 98%
    padding:15px 1%
.realTimeServicePage
    float right
    margin-top 10px
.projectNavList
    position relative
    z-index 30000 !important
    .shadeChoose
        padding-top 0 !important
        .shadeMain
            .title
                width 200px
                line-height 60px
                text-align center
                margin 0 auto
                display flex
                justify-content space-between
                h1
                    font-size 20px
                span
                    display: block
                    width: 12px
                    height: 12px
                    border: 1px solid #2eb398
                    transform: rotate(45deg)
                    margin-top: 23px
                    span
                        display block
                        margin 3px auto 0
                        width: 4px
                        height: 4px
                        background #2eb398
                        transform: rotate(0deg)
            .projects
                overflow hidden
                display flex
                justify-content space-between
                flex-wrap no-wrap
                border-bottom 1px dashed #cccccc
            .projectList
                width 25%
                overflow hidden
                display flex
                justify-content space-between
                flex-wrap: wrap
                margin-bottom 10px
                border-right  1px dashed #cccccc
                border-top 1px dashed #cccccc
                li
                    list-style none
                    width 140px
                    height 40px
                    line-height 38px
                    text-align center
                    color #ffffff
                    background #de1f39
                    border 2px solid #de1f39
                    border-radius 50px;
                    cursor pointer 
                    margin 10px 10px 0
                    box-sizing border-box
                    transition all 0.5s 
                    &:hover
                        color #de1f39
                        background #ffffff
                        border 2px solid #de1f39
                        border-radius 50px;
                        // box-sizing border-box
                        transition all 0.5s
            .projectChoose
                width 75%
                height 450px
                padding-top 15px
                border-top 1px dashed #cccccc
                li
                    float left
                    text-align center
                    list-style none
                    width 150px
                    height 150px
                    cursor pointer
                    margin 0 12px 0 12px
                    img
                        width 100px
                        height 100px
                        transition all 0.5s
                    &:hover img
                        transform scale(1.1)
                        transition all 0.5s
                    p
                        margin 10px


